<template>
  <uni-popup ref="popup" type="center">
    <view class="modal-body">
      <view class="modal-title">
        {{ title }}
      </view>
      <uni-forms onSubmit="onSubmit" onReset="onReset">
        <view class="modal-content">
          <textarea
            name="textarea"
            class="textarea"
            placeholder="请输入原因..."
          ></textarea>
        </view>
        <view class="modal-footer">
          <button class="modal-btn cancel" type="text" formType="reset">
            取消
          </button>
          <button class="modal-btn confrim" form-type="submit" type="text">
            提交
          </button>
        </view>
      </uni-forms>
    </view>
  </uni-popup>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      visible: false,
      type: "",
      title: "原因",
      params: {},
    };
  },
  mounted() {},
  methods: {
    onOpen(option) {
      this.title = option.title;
      this.type = option.type;
      this.params = option.params;
      this.$refs.popup.open();
    },
    onSubmit(e) {
      this.$emit("submit", {
        type: this.data.type,
        ...this.data.params,
        content: e.detail.value.textarea,
      });
      this.$refs.popup.close();
    },
    onReset() {
      this.title = "原因";
      this.type = "";
      this.params = {};
      this.$refs.popup.close();
    },
  },
};
</script>
<style lang="scss" scoped>
.modal-body {
  width: 500rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  padding: 20rpx 0;
  text-align: center;
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;
}

.modal-footer .modal-btn {
  flex: 1;
  font-size: 28rpx !important;
}

.confrim {
  color: #108ee9;
}
.textarea {
  height: 300rpx;
  padding: 20rpx;
}
</style>
